<template>
  <el-button v-waves :size="size" type="warning" plain v-bind="$attrs" @click="handelReturn()">
    <span class="i-custom-return wh-16px" :class="showText ? 'mr-6px' : ''"></span>
    <template v-if="showText">{{ text }}</template>
  </el-button>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'

  defineOptions({
    name: 'OptionReturn',
  })

  const props = withDefaults(
    defineProps<{
      returnRoute?: string
      showText?: boolean
      size?: string
      text?: string
    }>(),
    {
      text: '返回',
      showText: false,
      returnRoute: 'dashboard',
      size: 'default',
    }
  )

  const emits = defineEmits<{
    (e: 'on-click'): void
  }>()

  const router = useRouter()
  const route = useRoute()

  const handelReturn = () => {
    if (route.query.return === undefined) {
      router.push({ name: props.returnRoute })
    } else {
      router.push({ path: route.query.return })
    }

    emits('on-click')
  }
</script>
